<template>
  <div class="p-info">
    <div class="block base-info">
      <div class="b-item lot">
        <div class="row">
          <div class="txt">生产批次号</div>
          <div class="val">{{ online.lotid }}</div>
        </div>
        <div class="row">
          <div class="txt">库位号</div>
          <div class="val">{{ online.ware }}</div>
        </div>
      </div>
      <div class="b-item num">
        <div class="row">
          <div class="txt">总数量</div>
          <div class="val">{{ online.total }}</div>
        </div>
        <div class="row">
          <div class="txt">已完成</div>
          <div class="val">{{ online.complete }}</div>
        </div>
      </div>
    </div>
    <div class="dailine">
      <div class="han" v-for="i in 3">
        <div class="left">
          <div class="txt">待产批次号</div>
          <div class="val">{{ awaitline.lotid }}</div>
        </div>
        <div class="right">
          <div class="txt">库位号</div>
          <div class="val">{{ awaitline.ware }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";

let online = reactive({
  lotid: "dsbfdngnfdng",
  ware: "A",
  total: 100,
  complete: 50,
});
let awaitline = reactive({
  lotid: "dfdgfnhnng",
  ware: "A",
});
</script>
<style scoped lang="scss">
.p-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 16px;
  padding: 0 10px;
  color: #eee;
  .block {
    // flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
    .b-item {
      // height: 90px;
      margin-bottom: 10px;
      background: url("@/assets/images/box/actual.png") no-repeat;
      background-size: 100% 100%;
      .row {
        height: 30px;
        display: flex;
        align-items: center;
        padding: 5px 10px;
        .txt {
          width: 60px;
        }
        .val {
          flex: 1;
          overflow: hidden;
          color: aqua;
          font-size: 18px;
          font-weight: 400;
        }
      }
    }
    .lot {
      width: 60%;
      .row .txt {
        width: 90px;
      }
    }
    .num {
      width: 30%;
    }
  }
  .dailine {
    width: 90%;
    margin: 0 auto;
    padding: 0 10px;
    background: url("@/assets/images/box/envir.png") no-repeat;
    background-size: 100% 100%;
    .han {
      display: flex;
      align-items: center;
      height: 30px;
      &:not(:last-child) {
        border-bottom: 1px dashed #bbb;
      }
      .left {
        display: flex;
        align-items: center;
        width: 70%;
        margin-right: 10px;
        .txt {
          width: 90px;
        }
      }
      .right {
        flex: 1;
        display: flex;
        align-items: center;
        .txt {
          width: 60px;
        }
      }
      .val {
        flex: 1;
        color: aqua;
        font-size: 18px;
      }
    }
  }
  .val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
